/*
 * gui.js
 *
 * A collection of useful user-interface functions required for the application's
 * user interface to work.
 *
 * @author Tanya L. Crenshaw
 */

define(['./utilities', './jquery'], function(utilities, $) {

	/*
	 * instrument()
	 *
	 * Add all the events necessary to the elements on index.html to make the
	 * user interface interactive and functional.
	 *
	 * @returns void
	 */
	var instrument = function() {

		// Add a set of click events to the menubars so that they are toggled
		// when their checkboxes are clicked.
		utilities.addEvent(document.getElementById('ceeb_select'), 'click', function() {
			$("#ceeb_menubar").toggleClass("menubar menubar_clicked");
			$("#highschool_menubar").toggleClass("menubar_clicked menubar");

			// Get the value of the checkbox.  Suppose that it was checked.  The user
			// clicks on the checkbox, so we reach this event.  Now the checkbox is
			// unchecked.
			checkedValue = $("#ceeb_select").prop('checked');

			// Set the value of the checkboxes to the logical opposites of each other.
			// Only one checkbox can be selected.
			$("#ceeb_select").prop('checked', checkedValue);
			$("#highschool_select").prop('checked', !checkedValue);

		});

		utilities.addEvent(document.getElementById('highschool_select'), 'click', function() {
			$("#highschool_menubar").toggleClass("menubar menubar_clicked");
			$("#ceeb_menubar").toggleClass("menubar_clicked menubar");

			// Get the value of the checkbox.  Suppose that it was checked.  The user
			// clicks on the checkbox, so we reach this event.  Now the checkbox is
			// unchecked.
			checkedValue = $("#highschool_select").prop('checked');

			// Set the value of the checkboxes to the logical opposites of each other.
			// Only one checkbox can be selected.
			$("#ceeb_select").prop('checked', !checkedValue);
			$("#highschool_select").prop('checked', checkedValue);

		});
	};
	/*
	 * getHighSchool()
	 *
	 * This function gets the high school from the page, as entered by
	 * the user in the input textbox with id "highschool".
	 *
	 * @param void
	 * @return The value of the html element with id "highschool"
	 */
	var getHighSchool = function() {

		// Do a little bit of clever work to allow the user to
		// select the default placeholder.  If they choose to
		// use the placeholder as input, make that the new
		// value of the input.
		ret = document.getElementById("highschool").value;

		if(ret === "") {
			ph = document.getElementById("highschool").placeholder;

			if(ph != "") {
				document.getElementById("highschool").value = ph;
				return ph;

			}
		} else
			return ret;
	};
	/*
	 * getCEEB()
	 *
	 * This function gets the ceeb from the page, as entered by
	 * the user in the input textbox with id "ceeb".
	 *
	 * @param void
	 * @return The value of the html element with id "ceeb"
	 */
	var getCEEB = function() {

		// Do a little bit of clever work to allow the user to
		// select the default placeholder.  If they choose to
		// use the placeholder as input, make that the new
		// value of the input.
		ret = document.getElementById("ceeb").value;
		if(ret === "") {
			ph = document.getElementById("ceeb").placeholder;

			if(ph != "") {
				document.getElementById("ceeb").value = ph;
				return ph;
			}
		} else
			return ret;
	};
	/*
	 * whichActive()
	 *
	 * Query which menubar element is active, 'CEEB' or 'High School'
	 *
	 * @param el 'CEEB' or 'High School'
	 * @return true or false, depending on whether the given element is active.
	 */
	var isActive = function(el) {
		// Which menubar is active, CEEB or high school?
		isHighSchoolActive = $("#highschool_select").prop('checked');

		if(el == 'CEEB')
			return !isHighSchoolActive;
		else
			return isHighSchoolActive;

	}
	/*
	 * getUserInput()
	 *
	 * The interface has a collection of possible inputs from the user,
	 * but only one menu is active at a time.  Determine the active
	 * menu and return the value in the input box in the active menu.
	 *
	 * @return The user input
	 */
	var getUserInput = function() {

		// Which menubar is active, CEEB or high school?
		isHighSchoolActive = $("#highschool_select").prop('checked');

		if(isHighSchoolActive) {
			// Get the High School input box data.
			ret = getHighSchool();
		} else {
			ret = getCEEB();
		}

	};
	/*
	 * getErrorMsgElement()
	 *
	 * This function gets the element from the page where error messages
	 * should be placed.
	 *
	 * @param void
	 * @return The html element with id "errormessage"
	 */
	var getErrorMsgElement = function(coh) {

		if(coh === 'CEEB')
			return document.getElementById("ceeb_display");
		else if(coh === 'High School')
			return document.getElementById("highschool_display");
		else
			return document.getElementById("ceeb_display");
	};
	/*
	 * setError()
	 *
	 * This function sets an error message for the given menu element.
	 *
	 * @param el 'CEEB' or 'High School', indicating the menu element that
	 *        is to display an error message.
	 * @param msg The message to display.
	 */
	var setError = function(el, msg) {
		if(el === 'CEEB' || el === 'High School') {
			// Give an error message to the user:
			getErrorMsgElement(el).innerHTML = '<p>' + msg + '</p>';

			$("#ceeb_menubar").hide();
			$("#ceeb_menubar").show("highlight", {}, 400, null);
		}
	};
	/*
	 * clearError()
	 *
	 * This function sets an error message for the given menu element.
	 *
	 * @param el 'CEEB' or 'High School', indicating the menu element that
	 *        is to display an error message.
	 * @param msg The message to display.
	 */
	var clearErrors = function() {

		getErrorMsgElement('CEEB').innerHTML = "";

	};
	/*
	 * setResult()
	 *
	 * Given a result type -- CEEB or High School -- and an array of strings
	 * display the strings to the corresponding CEEB or High School result
	 * area on the screen.
	 *
	 * @param type 'CEEB' or 'High School'
	 * @param arr An array of strings to display
	 *
	 * @return void
	 */
	var setResult = function(type, arr) {
		
		if(type == 'CEEB') {
			$("#ceeb_display").html('<p>' + arr[0] + '</p>');

		} else if(type == 'High School') {
			$("#highschool_display").html('<p>' + arr[0] + '</p>');

		}
	};
	// Any functions defined in this return statement are considered public
	// functions by RequireJS, and accessible through the namespace that
	// is attached to this module when loaded in other files.
	return {
		instrument : instrument,
		getUserInput : getUserInput,
		getHighSchool : getHighSchool,
		getCEEB : getCEEB,
		isActive : isActive,
		setError : setError,
		clearErrors : clearErrors,
		setResult : setResult
	};
});
